<template>
  <h2 class="h2_2">近期天气</h2>
  <div class="bg-weather-secondary">
    <div class="four-days-info">
      <div class="day-info">
        <span>今天</span>
        <span>{{ todayDate }}</span>
        <span>{{ day1.dayweather }}</span>
        <span>风力 {{ day1.daypower }}级</span>
      </div>
      <div class="day-info">
        <span>明天</span>
        <span>{{ tomorrowDate }}</span>
        <span>{{ day2.dayweather }}</span>
        <span>风力 {{ day2.daypower }}级</span>
      </div>
      <div class="day-info">
        <span>{{ twodaysWeek }}</span>
        <span>{{ twodaysDate }}</span>
        <span>{{ day3.dayweather }}</span>
        <span>风力 {{ day3.daypower }}级</span>
      </div>
      <div class="day-info">
        <span>{{ threedaysWeek }}</span>
        <span>{{ threedaysDate }}</span>
        <span>{{ day4.dayweather }}</span>
        <span>风力 {{ day4.daypower }}级</span>
      </div>
    </div>
    <div class="weathercanvas">
      <div>
        <v-chart class="echart" :option="options"></v-chart>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useWeatherStore } from '@/stores/weather'
import { color } from 'echarts'

const props = defineProps({
  cityAdcode: {
    type: String,
    default: '',
  },
  cityName: {
    type: String,
    default: '',
  },
})
const cityObj = computed(() => {
  return {
    city: props.cityAdcode,
  }
})

const { day1, day2, day3, day4, localCityForecasts } = storeToRefs(
  useWeatherStore()
)

const todayDate = ref('')
const tomorrowDate = ref('')
const twodaysDate = ref('')
const threedaysDate = ref('')
const twodaysWeek = ref('')
const threedaysWeek = ref('')

const localCityForecast = ref([])
const xAxisData = ref([])
const dayData = ref([])
const nightData = ref([])

const options = ref({})
const renderChart = () => {
  options.value = {
    xAxis: {
      type: 'category',
      data: xAxisData.value,
      show: false,
    },
    yAxis: {
      type: 'value',

      show: false,
    },
    grid: {
      left: 20,
      right: 0,
      bottom: 30,
      top: 30,
    },
    series: [
      {
        type: 'line',
        data: dayData.value,
        label: {
          position: 'top',
          show: true,
          formatter: function (params) {
            return `白${params.value} °C`
          },
          color: '#fff',
          distance: 5, // 增加标签与线的距离
          fontSize: 12,
        },
        smooth: true,
        symbolSize: 6, // 增加点的大小
      },
      {
        type: 'line',
        data: nightData.value,
        label: {
          position: 'bottom',
          show: true,
          formatter: function (params) {
            return `黑${params.value} °C`
          },
          color: '#fff',
          distance: 5,
          fontSize: 12,
        },
        smooth: true,
        symbolSize: 6,
      },
    ],
  }
}
onMounted(() => {
  const today = new Date()
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  //获得日期 类似01-01
  todayDate.value = today.getMonth() + 1 + '-' + today.getDate()
  tomorrowDate.value = today.getMonth() + 1 + '-' + (today.getDate() + 1)
  twodaysDate.value = today.getMonth() + 1 + '-' + (today.getDate() + 2)
  threedaysDate.value = today.getMonth() + 1 + '-' + (today.getDate() + 3)

  //后两天星期几,周一到周日
  twodaysWeek.value = weekdays[(today.getDay() + 2) % 7]
  threedaysWeek.value = weekdays[(today.getDay() + 3) % 7]

  localCityForecast.value = Array.isArray(localCityForecasts.value)
    ? localCityForecasts.value
    : []
  // console.log(localCityForecast.value)
  xAxisData.value = localCityForecast.value.map((item) => item.date)
  // console.log(xAxisData.value)
  dayData.value = localCityForecast.value.map((item) => Number(item.daytemp))
  // console.log(dayData.value)
  nightData.value = localCityForecast.value.map((item) =>
    Number(item.nighttemp)
  )
  // console.log(nightData.value)
  renderChart()
})

watch(localCityForecasts, (newValue) => {
  localCityForecast.value = Array.isArray(newValue) ? newValue : []
  // 重新处理数据并渲染图表
  xAxisData.value = localCityForecast.value.map((item) => item.date || '')
  dayData.value = localCityForecast.value.map((item) =>
    item.daytemp ? Number(item.daytemp) : 0
  )
  nightData.value = localCityForecast.value.map((item) =>
    item.nighttemp ? Number(item.nighttemp) : 0
  )
  renderChart()
})
</script>

<style lang="scss" scoped>
.h2_2 {
  margin-top: 1.5rem;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.bg-weather-secondary {
  padding-top: 2.5rem;
  padding-left: 3rem;
  padding-right: 3rem;
  --tw-bg-opacity: 1;
  background-color: rgb(0 78 113 / var(--tw-bg-opacity));
  border-radius: 0.25rem;
  margin-top: 0.5rem;

  .four-days-info {
    gap: 1.5rem;
    display: flex;
    .day-info {
      text-align: center;
      gap: 1rem;
      flex-direction: column;
      flex: 1 1 0%;
      display: flex;
    }
  }
  .weathercanvas {
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    height: 10rem;
    margin-top: 2.5rem;
    div {
      position: relative;
      width: 1108px;
      height: 160px;
      padding: 0px;
      margin: 0px;
      border-width: 0px;
      cursor: default;
      .echart {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 1108px;
        height: 160px;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        padding: 0px;
        margin: 0px;
        border-width: 0px;
      }
    }
  }
}
</style>
